<template>
    <div>
        <transition name="fade">
            <div class="create-popup" style="z-index: 999"
                 v-if="fomotip.explainShow">
                <h1 class="create-popup-tit">
                    <!--奖池文档-->
                    <template v-if="fomotip.id == '0'">{{$t('m.efomo.document.tit')[0]}}</template>
                    <!--准备金文档-->
                    <template v-else-if="fomotip.id == '1'">{{$t('m.efomo.document.tit')[1]}}</template>
                    <!--活期文档-->
                    <template v-else-if="fomotip.id == '2'">{{$t('m.efomo.document.tit')[2]}}</template>
                    <!--定期文档-->
                    <template v-else-if="fomotip.id == '3'">{{$t('m.efomo.document.tit')[3]}}</template>
                    <!--周抽奖池-->
                    <template v-else-if="fomotip.id == '4'">{{$t('m.efomo.document.tit')[4]}}</template>
                    <!--注册须知-->
                    <template v-else-if="fomotip.id == '5'">{{$t('m.efomo.document.tit')[5]}}</template>
                    <!--预计产矿值-->
                    <template v-else-if="fomotip.id == '6'">{{$t('m.efomo.document.tit')[7]}}</template>
                    <template v-else-if="fomotip.id == 'com_cue'">{{$t('m.efomo.com_cue.tit')[0]}}</template>
                    <!--邀请码-->
                    <template v-else>{{$t('m.efomo.document.tit')[8]}}</template>
                </h1>
                <div class="create-content">
                    <div>
                        <p class="create-content-text">
                            <template v-if="fomotip.id == '0'">
                                {{$t('m.efomo.document.content')[0]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[30]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[31]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[32]}}
                            </template>
                            <template v-else-if="fomotip.id == '1'">{{$t('m.efomo.document.content')[1]}}</template>
                            <template v-else-if="fomotip.id == '2'">
                                {{$t('m.efomo.document.content')[2]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[33]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[34]}}
                            </template>
                            <template v-else-if="fomotip.id == '3'">
                                {{$t('m.efomo.document.content')[21]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[22]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[23]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[24]}}
                                <span class="create-line"></span>
                                <Efomo_table></Efomo_table>
                                {{$t('m.efomo.document.content')[25]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[26]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[27]}}
                            </template>
                            <template v-else-if="fomotip.id == '4'">
                                {{$t('m.efomo.document.content')[4]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[35]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[36]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[37]}}
                            </template>
                            <template v-else-if="fomotip.id == '5'">
                                {{$t('m.efomo.document.content')[5]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[18]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[6]}}
                                <br>
                                {{$t('m.efomo.document.content')[7]}}
                                <br>
                                {{$t('m.efomo.document.content')[8]}}
                                <br>
                                {{$t('m.efomo.document.content')[9]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[10]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[11]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[12]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[13]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[14]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[39]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[15]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[16]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[17]}}
                                <span class="create-line"></span>
                                <a href="javascript:void(0)">Email:SWE-service@outlook.com</a>
                            </template>
                            <template v-else-if="fomotip.id == '6'">
                                {{$t('m.efomo.document.content')[28]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[29]}}
                                <Efomo_table></Efomo_table>
                                <span class="create-line"></span>
                                {{$t('m.efomo.document.content')[40]}}
                            </template>
                            <template v-else-if="fomotip.id == 'com_cue'">
                                {{$t('m.efomo.com_cue.content')[0]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.com_cue.content')[1]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.com_cue.content')[2]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.com_cue.content')[3]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.com_cue.content')[4]}}
                                <span class="create-line"></span>
                                {{$t('m.efomo.com_cue.content')[5]}}
                                <span class="create-line"></span>
                                <span style ="font-size:10px;">{{$t('m.efomo.com_cue.content')[6]}}</span>
                                
                                <span class="create-line"></span>
                                <span style ="font-size:10px;">{{$t('m.efomo.com_cue.content')[7]}}</span>

                            </template>
                            <template v-else>
                                {{$t('m.efomo.document.content')[41]}}
                            </template>
                        </p>
                    </div>
                </div>
                <button class="create-next create-color" @click="aShowTip({explainShow: false})">{{
                    $t('m.sicbo.explain.explain[15]')
                    }}
                </button>
            </div>
        </transition>
        <transition name="bg">
            <div class="mui-backdrop" v-if="fomotip.explainShow"></div>
        </transition>
    </div>
</template>
<script>
    export default {
        name: 'Efomo_tip',
        data() {
            return {}
        },
    }
</script>
<style scoped>
    .create-content {
        height: calc(100% - 3rem);
        overflow-x: scroll;

    }

    /*5S*/
    @media (max-device-width: 320px) and (min-device-width: 300px) {
        .create-content {
            height: calc(100% - 2.5rem);
            overflow-x: scroll;
        }
    }

    .create-line {
        margin: .1rem;
        display: block;
    }

    .fontw {
        font-weight: normal;
    }

    .create-next {
        background-color: #E5BC8E;
        color: #000;
        padding: 0;
        height: 40px;
        font-size: 14px;
    }

    .fade-enter-active, .fade-leave-active {
        transition: all 0.5s;
    }

    .fade-enter, .fade-leave-to {
        transform: translate(-50%, 10rem);
    }

    .bg-enter-active, .bg-leave-active {
        transition: all 0.5s;
    }

    .bg-enter, .bg-leave-to {
        opacity: 0;
    }
</style>
